<template>
  <div>
    <a-table :data="data" stripe :pagination="false">
      <template #columns>
        <a-table-column title="企业名称" ellipsis tooltip data-index="factoryName"></a-table-column>
        <a-table-column title="公司地址" ellipsis tooltip data-index="address"></a-table-column>
        <a-table-column title="法人代表" ellipsis tooltip data-index="bossName"></a-table-column>
        <a-table-column title="建档时间" data-index="createTime"></a-table-column>
        <a-table-column title="联系电话" data-index="moblie"></a-table-column>
        <a-table-column title="关联商品数" data-index="productNum">
          <template #cell="{ record }">
            <a-button @click="toProducts(record)" type="text">{{ record.productNum }}</a-button>
          </template>
        </a-table-column>
        <a-table-column title="状态" data-index="status">
          <template #cell="{ record }">
            <a-switch
              v-model="record.status"
              :before-change="
                val => {
                  return changeStatus(val, record);
                }
              "
            />
          </template>
        </a-table-column>
        <a-table-column title="操作" align="center" :width="status === 0 ? 200 : 155">
          <template #cell="{ record }">
            <div style="display: flex">
              <a-button @click="clickEdit(record)" type="text">编辑</a-button>
              <a-button @click="clickSee(record)" type="text">查看</a-button>
              <a-button v-if="status === 0" @click="clickSee(record)" type="text">删除</a-button>
            </div>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  status: {
    type: Number,
    default: 1 //启用-1 禁用-0
  }
});

const changeStatus = (val, row) => {
  console.log("如果关联的商品数>0，则不允许禁用，弹出提示框让用户去换绑", val, row);
  return false;
};

const clickEdit = row => {
  console.log("点击编辑，页面跳转===", row);
  router.push({
    path: "/business/vmi/edit",
    query: { factoryId: "1795291239148523520" }
  });
};
const clickSee = row => {
  console.log("点击查看，弹出详情模态框===", row);
};
const toProducts = row => {
  console.log("跳转到商品管理列表===", row);
  router.push({
    path: "xxx",
    query: {}
  });
};
</script>

<style scoped></style>
